<template>
  <div class="login">
    <div class="login-box">
      <div class="logo">
        <!-- <img :src="logo"> -->
      </div>
      <div class="main">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" status-icon>
          <el-form-item label="" prop="username">
            <el-input class="input-box" placeholder="请输入用户名" v-model="ruleForm.username" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input class="input-box" placeholder="请输入密码" v-model="ruleForm.password" @keyup.enter.native="setFlag()" type="password" autocomplete="off"/>
          </el-form-item>
          <el-form-item>
            <!-- <el-button class="loginBtn" type="primary" @click="submitForm(ruleFormRef)">登录</el-button> -->
            <el-button class="loginBtn" type="primary" @click="setFlag()">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
      <div style="position:absolute;left:50%;top:95%;">
          <span style="color: #fff;font-size: 11px"> ICP证:  <a href="https://beian.miit.gov.cn/" style="color: white;text-decoration:none" target="_blank">浙ICP备2023005948号-1</a></span>
      </div>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, ref } from "vue";
import bgLogin from "@/assets/bgLogin.png";
import logo from "@/assets/logo.png";
import md5 from "js-md5"
import { Login } from "@/api/user";
import { FormInstance, ElMessage } from "element-plus";

import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    //登录
    const setFlag = () => {
        let pwd = md5(ruleForm.password);
        Login({
            usernumber: ruleForm.username,
            userpwd: pwd,
        }).then(
            (res) => {
                if (res.code == 200) {
                    let roleid = res.data.user_role;
                    localStorage.setItem("user", JSON.stringify(res.data));
                    localStorage.setItem("id", res.data.uid);
                    localStorage.setItem("roleId", roleid);
                    localStorage.setItem("factoryId", res.data.factory_id);
                    localStorage.setItem("factory_name", res.data.factory_name || "超级管理员");
                    localStorage.setItem("number", res.data.usernumber);
                    localStorage.setItem("pwd", ruleForm.password);
                    localStorage.setItem("token", res.data.token);
                    if(roleid){
                      router.push("/transportIndex");
                    }else{
                      router.push("/home");
                    }
                    ElMessage.success("登录成功");
                } else {
                    ElMessage.error(res.msg);
                }
            },
            (err) => {
                ElMessage.error("登录失败");
                return false;
            }
        );
    };
    const router = useRouter();
    const ruleFormRef = ref();
    const ruleForm = reactive({
      username: "",
      password: "",
    });
    // 重置
    const resetForm = () => {
      ruleForm.username = "";
      ruleForm.password = "";
    };
    // 校验
    const rules = {
      username: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        }
      ],
      password: [
        {
          required: true,
          message: "请输入密码",
          trigger: "blur",
        },
        {
          min: 3,
          max: 12,
          message: "密码格式错误",
          trigger: "blur",
        },
      ],
    };
    // 假登录
    // const setFlag = () => {
    //   localStorage.setItem("isLogin", 1);
    //   router.replace("/home");
    // };
    return {
      rules,
      ruleForm,
      ruleFormRef,
      setFlag,
    };
  },
});
</script>

<style lang="scss" scoped>
.login {
  background: url("@/assets/bgLogin.png") no-repeat;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-size: cover;
}

.logo {
  /* background: rebeccapurple; */
  background-image: url("@/assets/logo.png");
  width: 188px;
  height: 56px;
  margin: 10% 12%;
}

.login-box {
  width: 520px;
  height: 490px;
  position: fixed;
  left: 250px;
  top: 20%;
  background: rgba(114, 114, 114, 0.2);
}

.input-box {
  width: 390px;
  height: 50px;
  margin-left: 12%;
  border-radius: 2px;
  color: #fff;
  /* border: 1px solid #47c9FF; */
}

::v-deep .el-input__wrapper {
  background-color: transparent !important;
}

::v-deep .el-form-item__error {
  margin-left: 12%;
}
::v-deep .el-input__inner{
  color: #fff;
}
.loginBtn {
  width: 390px;
  height: 50px;
  margin-top: 32px;
  margin-left: 12%;
  border-radius: 2px;
  background: rgba(12, 111, 214, 1);
}
</style>
